<template>
    <el-card class="card" :body-style="{ padding: '0px'}">
      <div slot="header"
           style="display: flex;ustify-content: space-between;justify-content: space-between;align-items: center;">
        <div class="cardHeader">
          <div class="cardTitle">{{ titleIn }}</div>
        </div>
        <router-link :to="`/social?category=${category}`">
          <div class="headerMore">
            <div>
              更多
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none"
                 version="1.1" width="10" height="10" viewBox="0 0 10 10">
              <g style="mix-blend-mode:passthrough">
                <g style="mix-blend-mode:passthrough" transform="matrix(-1,0,0,1,18.183460235595703,0)">
                  <path
                    d="M13.524350117797852,1.7429931562499998Q13.594920117797852,1.6726351562500001,13.633120117797851,1.58060015625Q13.671320117797851,1.48856515625,13.671320117797851,1.38891615625Q13.671320117797851,1.33967015625,13.661710117797853,1.2913711562499999Q13.652110117797852,1.24307115625,13.633260117797851,1.19757415625Q13.614410117797853,1.15207715625,13.58706011779785,1.11113115625Q13.559700117797853,1.07018415625,13.524870117797851,1.03536215625Q13.490050117797852,1.00054015625,13.44911011779785,0.97318115625Q13.408160117797852,0.94582175625,13.362660117797851,0.92697625625Q13.317160117797851,0.90813075625,13.268870117797851,0.89852337625Q13.220570117797852,0.88891601525,13.171320117797851,0.88891601525Q13.072060117797852,0.88891601525,12.980320117797852,0.92683465625Q12.888590117797852,0.96475325625,12.81829011779785,1.03483915625L9.267490117797852,4.57514015625Q9.091125130797852,4.75098015625,9.091125130797852,5.00003015625Q9.091125130797852,5.24908015625,9.267490117797852,5.42492015625L12.81829011779785,8.96522015625Q12.888590117797852,9.03530015625,12.980320117797852,9.07322015625Q13.072060117797852,9.11114015625,13.171320117797851,9.11114015625Q13.220570117797852,9.11114015625,13.268870117797851,9.10153015625Q13.317160117797851,9.09192015625,13.362660117797851,9.07308015625Q13.408160117797852,9.05423015625,13.44911011779785,9.02687015625Q13.490050117797852,8.99951015625,13.524870117797851,8.96469015625Q13.559700117797853,8.92987015625,13.58706011779785,8.88892015625Q13.614410117797853,8.84798015625,13.633260117797851,8.802480156249999Q13.652110117797852,8.75698015625,13.661710117797853,8.70868015625Q13.671320117797851,8.66038015625,13.671320117797851,8.61114015625Q13.671320117797851,8.51149015625,13.633120117797851,8.41945015625Q13.594920117797852,8.32742015625,13.524350117797852,8.257060156249999L10.257650117797851,5.00003015625L13.524350117797852,1.7429931562499998ZM17.146420117797852,1.7429931562499998Q17.216990117797852,1.6726351562500001,17.255190117797852,1.58060015625Q17.293390117797852,1.48856515625,17.293390117797852,1.38891615625Q17.293390117797852,1.33967015625,17.283780117797853,1.2913711562499999Q17.27418011779785,1.24307115625,17.255330117797854,1.19757415625Q17.236480117797853,1.15207715625,17.209120117797852,1.11113115625Q17.18176011779785,1.07018415625,17.146940117797854,1.03536215625Q17.11212011779785,1.00054015625,17.071170117797852,0.97318115625Q17.030230117797853,0.94582175625,16.984730117797852,0.92697625625Q16.93923011779785,0.90813075625,16.890940117797854,0.89852337625Q16.842640117797853,0.88891601525,16.793390117797852,0.88891601525Q16.69413011779785,0.88891601525,16.602390117797853,0.92683465625Q16.51066011779785,0.96475325625,16.44036011779785,1.03483915625L12.889560117797851,4.57514015625Q12.713200117797852,4.75098015625,12.713200117797852,5.00003015625Q12.713200117797852,5.24908015625,12.889560117797851,5.42492015625L16.44036011779785,8.96522015625Q16.51066011779785,9.03530015625,16.602390117797853,9.07322015625Q16.69413011779785,9.11114015625,16.793390117797852,9.11114015625Q16.842640117797853,9.11114015625,16.890940117797854,9.10153015625Q16.93923011779785,9.09192015625,16.984730117797852,9.07308015625Q17.030230117797853,9.05423015625,17.071170117797852,9.02687015625Q17.11212011779785,8.99951015625,17.146940117797854,8.96469015625Q17.18176011779785,8.92987015625,17.209120117797852,8.88892015625Q17.236480117797853,8.84798015625,17.255330117797854,8.802480156249999Q17.27418011779785,8.75698015625,17.283780117797853,8.70868015625Q17.293390117797852,8.66038015625,17.293390117797852,8.61114015625Q17.293390117797852,8.51149015625,17.255190117797852,8.41945015625Q17.216990117797852,8.32742015625,17.146420117797852,8.257060156249999L13.879720117797852,5.00003015625L17.146420117797852,1.7429931562499998Z"
                    fill-rule="evenodd" fill="#787878" fill-opacity="1"/>
                </g>
              </g>
            </svg>
          </div>
        </router-link>

      </div>
      <div>
        <div v-if="data != null && data.length > 0">
          <div>
            <ul>
              <template v-for="item in data">
                <router-link :to="`/social/detail?id=${item.postId}`" class="listA">
                  <li>
                    <div class="content">
                      <span style="margin-left: 10px">{{ `【${item.username}】${item.title}` }}</span>
                    </div>
                    <div class="datetime">
                      <span>{{ item.createTime.slice(0,10) }}</span>
                    </div>
                  </li>
                </router-link>
              </template>
            </ul>
          </div>
        </div>
        <div v-else>
          <el-row>
            <el-col :span="24" class="emptyData">
              <svg t="1734361537331" class="icon" viewBox="0 0 1327 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6439" width="160" height="160"><path d="M0 877.459451c0 80.936647 295.860573 146.540549 660.818059 146.540549s660.809762-65.603902 660.809762-146.540549c0-80.92835-295.852276-146.532252-660.809762-146.532252C295.860573 730.927199 0 796.531101 0 877.459451z" fill="#E5F2FF" p-id="6440"></path><path d="M155.899497 414.233011l518.799342-83.334462 0.481222 569.468753-423.849164-72.913506L155.899497 414.233011z" fill="#AAC7E8" p-id="6441"></path><path d="M155.409977 413.702007l410.366638 138.37636-2.11572 432.378418-325.547023-150.913036z" fill="#D3E4FC" p-id="6442"></path><path d="M436.08715 557.156094l-159.118709-52.660676a14.295627 14.295627 0 0 0-13.947156 2.655021 14.245845 14.245845 0 0 0-4.754146 13.36637l11.101305 55.257618 179.944028 59.505651 0.306987-59.630105a19.414839 19.414839 0 0 0-13.524012-18.502176z" fill="#92B3D4" p-id="6443"></path><path d="M436.269683 553.530332L280.154466 500.886249a14.113094 14.113094 0 0 0-13.77292 2.779475 14.07161 14.07161 0 0 0-4.530129 13.283401l10.868991 55.216133 176.500798 59.497355 0.306987-59.630106a19.423136 19.423136 0 0 0-13.25851-18.493878z" fill="#AAC7E8" p-id="6444"></path><path d="M674.698839 330.151824l383.667085 108.399517-71.876388 435.506365-311.798994 81.044507V330.151824z" fill="#D3E4FC" p-id="6445"></path><path d="M876.654648 441.729069l-159.135303-52.652379a14.245845 14.245845 0 0 0-13.897374 2.679911 14.204361 14.204361 0 0 0-4.704365 13.34148l11.051524 55.257618 179.628744 59.497354 0.273799-59.630105a19.381651 19.381651 0 0 0-13.217025-18.493879z" fill="#92B3D4" p-id="6446"></path><path d="M877.185652 438.111604l-156.164999-52.65238a14.113094 14.113094 0 0 0-13.77292 2.862444 14.07161 14.07161 0 0 0-4.438862 13.333183l10.868991 55.216133 176.409531 59.547136 0.315284-59.638402a19.414839 19.414839 0 0 0-13.217025-18.668114z" fill="#FFFFFF" p-id="6447"></path><path d="M566.050414 551.995398l-2.879038 432.461387 442.060946-113.435759 53.133602-432.469685L566.050414 551.995398" fill="#AAC7E8" p-id="6448"></path><path d="M671.637268 330.765798l382.090667 108.806067 3.575981-0.796506L673.545564 330.458811l-1.908296 0.306987z" fill="#92B5DC" p-id="6449"></path><path d="M155.409977 413.702007L674.873075 330.193309l-0.174236 1.286026-517.604583 82.803458-1.684279-0.580786z" fill="#92B5DC" p-id="6450"></path><path d="M155.409977 413.702007l410.457904 138.592081 2.124017-0.522708L157.227007 413.436505l-1.81703 0.265502z" fill="#92B5DC" p-id="6451"></path><path d="M565.428143 552.343869l491.875773-113.56851-0.082969 1.277728-491.925555 113.701262 0.132751-1.41048z" fill="#92B5DC" p-id="6452"></path><path d="M762.256443 520.433839s49.375088 398.29459 49.814826 408.450044c0.448035 10.147157 91.681184 57.381635 91.681184 57.381635L762.248147 520.433839z" fill="#1E68B3" opacity=".2" p-id="6453"></path><path d="M757.220201 502.329917l146.523955 483.753069 132.784223-9.881656-151.651464-486.930796z" fill="#AAC7E8" p-id="6454"></path><path d="M884.868618 489.270534l228.215623-145.835309 105.603449 463.359191-182.159311 169.406914-151.651464-486.930796z" fill="#D3E4FC" p-id="6455"></path><path d="M996.089095 349.657929l-238.868894 152.671988 127.565448-12.926632 228.257108-145.835309-116.953662 6.089953z" fill="#DEEBFA" p-id="6456"></path><path d="M973.313995 109.420041c0 44.139719-47.068539 81.782935-114.912614 99.17332-7.168556 1.858514-50.926616 44.496488-50.926616 44.496487s10.205236-36.722255 0.489519-35.842779a347.791118 347.791118 0 0 1-33.635793 1.593012c-109.934451 0-198.910832-48.993429-198.910832-109.42004S664.352555 0 774.278709 0c109.934451 0 199.043583 48.993429 199.043583 109.420041z" fill="#E5F2FF" p-id="6457"></path><path d="M831.436327 109.420041a23.762435 23.762435 0 0 0 23.779029 23.745841 23.762435 23.762435 0 0 0 23.779029-23.745841 23.762435 23.762435 0 0 0-23.779029-23.745842 23.762435 23.762435 0 0 0-23.779029 23.745842zM750.49968 109.420041a23.762435 23.762435 0 0 0 23.779029 23.745841 23.762435 23.762435 0 0 0 23.779029-23.745841 23.762435 23.762435 0 0 0-23.779029-23.745842 23.762435 23.762435 0 0 0-23.779029 23.745842zM669.563033 109.420041a23.762435 23.762435 0 0 0 23.787326 23.745841 23.762435 23.762435 0 0 0 23.77903-23.745841 23.762435 23.762435 0 0 0-23.77903-23.745842 23.762435 23.762435 0 0 0-23.779029 23.745842z" fill="#FFFFFF" p-id="6458"></path></svg>
              暂无公告信息
              {{ sourceData }}
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>
</template>

<script setup lang="ts">  
import { ref, watch, defineProps } from 'vue';  

const props = defineProps<{  
  title: string;  
  sourceData: {};
  category: number;  
}>();  
  
const titleIn = ref(props.title);  
const data = ref();
   
watch(() => props.sourceData, (val) => {  
  data.value = val;  
}, { immediate: true });
</script>

<style lang="scss" scoped>
::v-deep .el-card__header {
  padding: 0px;
  min-height: 48px;
  height: 48px;
}

.card {
  width: 90%;
  height: 390px;
  border-radius: 12px;
  opacity: .95;
  background: #FFFFFF;
}

.card:hover{
  transform: scale(1.05);
  box-shadow:0px 0px 12px rgba(0, 0, 0, 0.22)
}

.cardHeader {
  width: 520px;
  height: 48px;
  border-radius: 12px 0px 0px 0px;
  opacity: 1;
  background: linear-gradient(90deg, #4d9cdd 0%, rgba(255, 255, 255, 0.00) 100%);
  text-align: left;

  .cardTitle {
    font-family: MicrosoftYaHei;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0em;
    color: #FFFFFF;
    padding: 10px 0 9px 20px;
  }

  a{
    display: flex;
  }
}

.headerMore {
  font-family: MicrosoftYaHei, sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 22px;
  letter-spacing: 0em;
  color: #666666;
  margin-right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  div{
    text-wrap: nowrap;
    margin-right: 5px;
  }
}

.headerMore:hover {
  color: #4d9cdd;
  cursor: pointer;

  svg:hover path {
    fill: #4d9cdd;
  }
}

.emptyData {
  text-align: center;
  display: flex;
  align-content: space-around;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-top: 30px;
  color: #999999;
  font-family: MicrosoftYaHei, sans-serif;
}

.listA{
  width: 100%;
}

.datetime{
  width: 20%;
}

ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

  li {
    margin: 20px 0 0 20px;
    list-style: none;
    font-family: MicrosoftYaHei, serif;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: MicrosoftYaHei, serif;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0em;

    color: #3D3D3D;

    .content {
      width: 540px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }

  }

  li:hover {
    color: #4d9cdd;
    cursor: pointer;
  }
}

@media screen and (max-width: 767px){
  // 宽度自适应
  .card{
    width: 100%;
    height: auto;
  }
  // 标题宽度计算
  .cardHeader{
    width: calc(100% - 80px);
  }

  ul {
    padding-bottom: 10px;
    a{
      width: 100%;
      li{
        margin-left: 6px;
        // 固定文字宽度
        .content span{
          display: block;
          text-align: left;
          width: calc(100% - 50px);
        }
        // 隐藏日期
        .datetime{
          display: none;
        }
      }
    }
  }
}
</style>
